<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI知识问答系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }

        .ai-container {
            display: flex;
            height: 100vh;
        }

        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%);
            color: white;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 18px;
        }

        .new-chat-btn {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            box-sizing: border-box;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .new-chat-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .sidebar-menu {
            flex: 1;
            padding: 20px 0;
            overflow-y: auto;
        }

        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            display: flex;
            align-items: center;
        }

        .menu-item:hover,
        .menu-item.active {
            background: rgba(255, 255, 255, 0.1);
            border-left-color: white;
        }

        .menu-icon {
            margin-right: 12px;
            font-size: 16px;
        }

        .chat-history {
            padding: 0 20px;
        }

        .chat-item {
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 6px;
            margin-bottom: 5px;
            transition: all 0.3s;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            border-left: 3px solid transparent;
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .chat-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-left-color: white;
        }

        .chat-item.active {
            background: rgba(255, 255, 255, 0.15);
            border-left-color: white;
        }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: white;
        }

        .chat-header {
            height: 60px;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            background: white;
        }

        .chat-area {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background: #fafafa;
        }

        .welcome-screen {
            text-align: center;
            margin-top: 100px;
        }

        .welcome-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 20px;
        }

        .quick-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin: 40px 0;
        }

        .quick-action-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s;
            width: 200px;
        }

        .quick-action-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .message {
            margin-bottom: 30px;
            display: flex;
            align-items: flex-start;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 15px;
            flex-shrink: 0;
        }

        .message.user .message-avatar {
            background: #4a90e2;
            color: white;
        }

        .message.ai .message-avatar {
            background: #f0f0f0;
            color: #666;
        }

        .message-content {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            max-width: 70%;
            word-wrap: break-word;
        }

        .message.user .message-content {
            background: #4a90e2;
            color: white;
        }

        .message-actions {
            margin-top: 15px;
            display: flex;
            gap: 15px;
        }

        .action-btn {
            background: none;
            border: 1px solid #e6e6e6;
            border-radius: 6px;
            padding: 5px 10px;
            cursor: pointer;
            color: #666;
            font-size: 12px;
            transition: all 0.3s;
        }

        .input-area {
            padding: 20px 30px;
            background: white;
            border-top: 1px solid #e6e6e6;
        }

        .input-container {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            border: 1px solid #e6e6e6;
            border-radius: 24px;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .input-box {
            width: 100%;
            border: none;
            font-size: 16px;
            resize: none;
            min-height: 20px;
            outline: none;
            background: transparent;
            line-height: 1.5;
            padding: 8px 0;
        }

        .button-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-buttons,
        .right-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .attachment-btn {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background: transparent;
            color: #666;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            font-size: 16px;
        }

        .attachment-btn:hover {
            background: #f0f0f0;
            color: #4a90e2;
        }

        .feature-btn {
            background: #e3f2fd;
            color: #1976d2;
            border: none;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 8px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .feature-btn:hover {
            background: #bbdefb;
        }

        .send-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #4a90e2;
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            font-size: 16px;
        }

        .send-btn:hover {
            background: #357abd;
        }

        .send-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .suggestion-item {
            display: inline-block;
            margin: 5px 10px;
            padding: 8px 16px;
            background: white;
            border: 1px solid #e6e6e6;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            color: #666;
            transition: all 0.3s;
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            color: #666;
            font-style: italic;
        }

        .typing-dots span {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4a90e2;
            margin: 0 2px;
            animation: typing 1.4s infinite ease-in-out;
        }

        .el-textarea__inner {
            border: 0px;
            resize: none;
        }

        @keyframes typing {

            0%,
            80%,
            100% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="ai-container">
            <div class="sidebar">
                <div class="sidebar-header">
                    <div class="user-info">
                        <div class="user-avatar">👤</div>
                        <div style="margin-left: 10px;">豆豆</div>
                    </div>
                    <div class="new-chat-btn" @click="startNewChat">
                        <i class="el-icon-plus" style="margin-right: 8px;"></i>
                        新对话
                    </div>
                </div>
                <div class="sidebar-menu">
                    <div class="menu-item active">
                        <i class="el-icon-search menu-icon"></i>
                        AI搜索
                    </div>
                    <div class="menu-item">
                        <i class="el-icon-edit menu-icon"></i>
                        智能写作
                    </div>
                    <div class="menu-item">
                        <i class="el-icon-chat-dot-round menu-icon"></i>
                        AI问答
                    </div>
                    <div class="menu-item">
                        <i class="el-icon-picture menu-icon"></i>
                        图像生成
                    </div>
                    <div style="margin: 20px 0; color: rgba(255,255,255,0.7); font-size: 14px; padding: 0 20px;">历史对话
                    </div>
                    <div class="chat-history">
                        <div class="chat-item" v-for="(chat, index) in chatHistory" :key="chat.id"
                            :class="{ active: currentChatId === chat.id }" @click="loadChat(chat.id)">{{ chat.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="chat-header">
                    <div style="font-size: 18px; font-weight: 500;">Jeecgboot 功能介绍</div>
                    <div>
                        <el-button size="mini" icon="el-icon-share" circle></el-button>
                    </div>
                </div>
                <div class="chat-area">
                    <div v-if="messages.length === 0" class="welcome-screen">
                        <h1 class="welcome-title">AI知识问答助手</h1>
                        <p style="color: #666; margin-bottom: 40px;">您好！我是您的AI助手，可以回答各种问题，协助您完成工作。</p>
                        <div class="quick-actions">
                            <div class="quick-action-card" @click="askQuestion('CodeBuddy和Qoder有什么区别？')">
                                <h3>工具对比</h3>
                                <p>了解不同AI工具的特点和优势</p>
                            </div>
                            <div class="quick-action-card" @click="askQuestion('如何选择合适的编程工具？')">
                                <h3>选择建议</h3>
                                <p>获取专业的工具选择建议</p>
                            </div>
                        </div>
                        <div style="text-align: center;">
                            <div class="suggestion-item" @click="askQuestion('详细介绍一下CodeBuddy的功能特点')">
                                详细介绍一下CodeBuddy的功能特点 →</div>
                            <div class="suggestion-item" @click="askQuestion('Qoder和CodeBuddy在AI能力上有什么区别？')">
                                Qoder和CodeBuddy在AI能力上有什么区别？ →</div>
                        </div>
                    </div>
                    <div v-else>
                        <div v-for="message in messages" :key="message.id" class="message" :class="message.type">
                            <div class="message-avatar">{{ message.type === 'user' ? '👤' : '🤖' }}</div>
                            <div class="message-content">
                                <div v-if="message.isTyping" class="typing-indicator">
                                    正在思考中...
                                    <div class="typing-dots" style="margin-left: 10px;">
                                        <span></span><span></span><span></span>
                                    </div>
                                </div>
                                <div v-else v-html="formatMessage(message.content)"></div>
                                <div v-if="message.type === 'ai' && !message.isTyping" class="message-actions">
                                    <button class="action-btn">👍</button>
                                    <button class="action-btn">👎</button>
                                    <button class="action-btn" @click="copyMessage(message.content)">复制</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 输入区域 -->
                <div class="input-area">
                    <div class="input-container">
                        <el-input type="textarea" v-model="inputMessage" placeholder="发消息，输入 @ 选择技能或 / 选择文档"
                            class="input-box" :autosize="{ minRows: 1, maxRows: 4 }"
                            @keydown.enter.prevent="handleEnter" :disabled="isTyping"></el-input>
                        <div class="button-row">
                            <div class="left-buttons">
                                <button class="attachment-btn" @click="attachFile" title="附件上传">
                                    <i class="el-icon-paperclip"></i>
                                </button>
                                <button class="feature-btn">
                                    <i class="el-icon-lightning"></i> 深度思考
                                </button>
                                <button class="feature-btn">
                                    <i class="el-icon-cpu"></i> 技能
                                </button>
                            </div>
                            <div class="right-buttons">
                                <button class="attachment-btn" title="更多选项">
                                    <i class="el-icon-more"></i>
                                </button>
                                <button class="attachment-btn" title="语音输入">
                                    <i class="el-icon-microphone"></i>
                                </button>
                                <button class="attachment-btn" title="语音通话">
                                    <i class="el-icon-phone"></i>
                                </button>
                                <button class="send-btn" @click="sendMessage"
                                    :disabled="!inputMessage.trim() || isTyping" title="发送消息">
                                    <i class="el-icon-top"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    inputMessage: '',
                    isTyping: false,
                    messages: [],
                    currentChatId: 1,
                    chatHistory: [
                        { title: 'Jeecgboot 功能介绍', id: 1 },
                        { title: 'ES 数据迁移', id: 2 },
                        { title: '引入用户和权限管理', id: 3 },
                        { title: '手机版对接', id: 4 },
                        { title: '混合搜索算法RRF 解法', id: 5 },
                        { title: '舆情分析与知识库结合', id: 6 }
                    ]
                };
            },
            methods: {
                startNewChat() {
                    this.messages = [];
                    this.inputMessage = '';
                    this.currentChatId = null;
                },
                loadChat(chatId) {
                    this.currentChatId = chatId;
                    if (chatId === 1) {
                        this.loadSampleChat();
                    } else {
                        this.messages = [];
                    }
                },
                loadSampleChat() {
                    this.messages = [
                        { id: 1, type: 'user', content: 'CodeBuddy和Qoder有什么区别？' },
                        {
                            id: 2, type: 'ai', content: `## CodeBuddy vs Qoder 对比分析

### 5. 价格与开源性

**CodeBuddy**
- 提供免费版（功能有限，如每日生成代码量限制）和订阅时付费版（按功能键档次费，约 $10-30 / 月）。
- 非开源，但其基础功能可免费使用。

**Qoder**
- 完全免费，采用按项目 / 团队模式（企业级订阅，价格较高，适合团队采购）。
- 支持私有化部署（需额外付费），适合对代码隐私数据敏感的企业（如金融、军工）。` }
                    ];
                },
                askQuestion(question) {
                    this.inputMessage = question;
                    this.sendMessage();
                },
                handleEnter(event) {
                    if (!event.shiftKey) {
                        this.sendMessage();
                    }
                },
                async sendMessage() {
                    if (!this.inputMessage.trim() || this.isTyping) return;
                    const userMessage = this.inputMessage.trim();
                    this.messages.push({ id: Date.now(), type: 'user', content: userMessage });
                    this.inputMessage = '';
                    this.isTyping = true;
                    const typingMessage = { id: Date.now() + 1, type: 'ai', content: '', isTyping: true };
                    this.messages.push(typingMessage);
                    setTimeout(() => {
                        this.messages.pop();
                        const response = this.generateAIResponse(userMessage);
                        this.messages.push({ id: Date.now() + 2, type: 'ai', content: response });
                        this.isTyping = false;
                    }, 2000);
                },
                generateAIResponse(question) {
                    if (question.includes('CodeBuddy') || question.includes('Qoder')) {
                        return `## CodeBuddy vs Qoder 对比分析

### 价格与开源性

**CodeBuddy** - 提供免费版和付费版（$10-30/月）
**Qoder** - 完全免费，支持企业级订阅和私有化部署

### 总结
- **CodeBuddy**：适合个人开发者，快速代码生成
- **Qoder**：适合团队开发，代码质量分析`;
                    }
                    return `感谢您的提问！我是AI知识问答助手，可以为您提供：

- 🔧 技术工具对比和选择建议
- 💡 编程最佳实践和代码优化
- 📚 学习资源推荐和指导
- 🚀 项目架构和开发流程建议

请告诉我您需要了解什么，我会详细为您解答。`;
                },
                formatMessage(content) {
                    return content.replace(/\n/g, '<br>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
                },
                copyMessage(content) {
                    navigator.clipboard.writeText(content).then(() => {
                        this.$message.success('已复制到剪贴板');
                    });
                },
                attachFile() {
                    this.$message.info('附件上传功能正在开发中...');
                }
            }
        });
    </script>
</body>

</html>